/* Max width 767px */
@media only screen and (max-width: 767px) {
  .container-fluid {
    padding-left: calc(1.5rem * 0.5);
    padding-right: calc(1.5rem * 0.5);
  }
  .ptb-100 {
    padding: 60px 0px;
  }
  .pt-100 {
    padding-top: 60px;
  }
  .pb-100 {
    padding-bottom: 60px;
  }
  .pt-70 {
    padding-top: 60px;
  }
  .pb-70 {
    padding-bottom: 60px;
  }
  .main-btn {
    font-size: 16px;
    padding-left: 40px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 12px;
    font-weight: 500;
  }
  .main-btn i {
    left: 16px;
    top: 9px;
    font-size: 18px;
  }
  .default-btn {
    padding: 13px 42px 13px 20px;
    font-size: 16px;
  }
  .default-btn i {
    right: 15px;
    top: 10px;
    font-size: 20px;
  }
  .section-title-center h2 {
    font-size: 28px;
  }
  .section-title-center .width {
    margin-bottom: 40px;
  }
  .sub-t {
    font-size: 14px;
  }
  .section-title h2 {
    font-size: 28px;
  }
  /* nav area*/
  .navbar {
    top: 0;
    padding: 20px 15px;
  }
  .navbar .navbar-brand h2 {
    font-size: 28px;
    font-weight: 600;
  }
  .navbar .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
  }
  /* banner area */
  .banner-area {
    padding-top: 110px;
    padding-bottom: 0px;
  }
  .banner-area span.banner-top-title {
    font-size: 14px;
  }
  .banner-area .content {
    padding-left: 16px;
    padding-right: 12px;
  }
  .banner-area .popular-tag {
    display: inline-block;
  }
  .banner-area .popular-tag p {
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .banner-area .popular-tag a {
    padding: 6px 8px;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 10px;
  }
  .banner-area .scroll-down {
    left: -270px;
    right: 0;
    bottom: 50px;
  }
  .banner-area .content h1 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .banner-area .content p {
    font-size: 14px;
    max-width: 50vw;
  }
  .banner-area .searchbox {
    padding: 10px 25px 10px 25px;
  }
  .banner-area .searchbox .form-control {
    padding: 14px 10px;
    font-size: 15px;
    border: 1px solid #f1f1f1;
    margin-bottom: 7px;
  }
  .banner-area .searchbox .btn {
    padding: 10px 15px;
    font-size: 16px;
  }
  .banner-area .image {
    padding-top: 30px;
  }
  /* fetuses area */
  .fetuses-area .single-fetuses-box .icon i {
    font-size: 50px;
    margin-bottom: 15px;
    background-image: linear-gradient(315deg, #7f00ff 35%, #e100ff 50%);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
  }
  .fetuses-area {
    padding: 0 12px;
  }
  .fetuses-area h4 {
    margin: 0.8rem 0;
  }
  .fetuses-area .active h4 {
    color: #ee006d;
  }
  .fetuses-area .single-fetuses-box h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .fetuses-area .single-fetuses-box p {
    font-size: 16px;
  }
  .fetuses-area .single-fetuses-box a {
    font-size: 16px;
  }
  .fetuses-area .single-fetuses-box {
    padding: 0 20px;
    padding: 1rem 0 0;
  }
  /* team area  */
  .team-area .owl-theme .owl-nav {
    top: 100%;
    left: 0;
    right: 0;
  }
  .team-area .owl-carousel .owl-nav button.owl-next,
  .team-area .owl-carousel .owl-nav button.owl-prev,
  .team-area .owl-carousel button.owl-dot {
    font-size: 40px !important;
  }
  /* about area */
  .about-area {
    padding: 16px 16px 24px;
  }
  .about-area .container-fluid {
    padding: 0;
  }
  .about-area .container-fluid img {
    width: 100%;
    object-fit: cover;
  }
  .about-area .text-content {
    margin-left: 1rem;
  }
  .about-area .image {
    margin-bottom: 30px;
  }
  .about-area .content {
    padding-left: 0px;
  }
  .about-area .content h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .about-area .sub-counter h3 {
    font-size: 36px;
  }
  .about-area .content p {
    font-size: 16px;
    text-wrap: balance;
  }
  .about-dmd {
    padding: 16px 16px 24px;
  }
  .about-dmd .sub-title {
    color: #fff;
    margin: 1rem 0;
  }
  .about-dmd .top-icon {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
  }
  .about-dmd .main-container {
    margin-left: 0;
  }
  .about-dmd .icon {
    width: 140px;
  }
  .roadmap-area {
    padding: 16px 16px 24px;
  }
  .roadmap-area h1 {
    font-size: 18px;
  }
  .roadmap-area .verticle-line {
    margin: 0 1rem;
  }
  .roadmap-area .roadmap-container {
    display: block;
  }
  .roadmap-area .container-fluid {
    max-width: unset;
    margin: 0;
  }
  .roadmap-area .container-fluid img {
    width: 100%;
  }
  .roadmap-btn-group {
    margin: 1rem 0;
  }
  /* gallery area */
  .gallery-area {
    padding-top: 100px;
  }
  .gallery-area .gallery-table ul {
    bottom: -62%;
    width: 100%;
  }
  .gallery-area .gallery-table ul li {
    margin-right: 17px;
    font-size: 16px;
  }
  .gallery-area .gallery {
    -moz-column-count: 1;
    column-count: 1;
    --webkit-column-count: 1;
    --moz-column-count: 1;
  }
  /* testimonial area */
  .testimonial-area .user img {
    height: 60px;
    width: 60px;
  }
  .testimonial-area .testimonial-item p {
    font-size: 18px;
  }
  .testimonial-area .testimonial-item h4 {
    font-size: 16px;
  }
  .testimonial-area .testimonial-item span {
    font-size: 15px;
  }
  .testimonial-area .user:nth-child(2) {
    top: -6%;
  }
  .testimonial-area .user:nth-child(3) {
    top: -3%;
  }
  .testimonial-area .user:nth-child(4) {
    bottom: 6%;
  }
  .testimonial-area .user:nth-child(5) {
    bottom: 70px;
    left: 9%;
  }
  /* brands area */
  .brands-area img {
    margin-bottom: 25px;
  }
  .brands-area .row .col-lg-2:last-child .image img {
    margin-bottom: 0;
  }
  .brands-area .row {
    justify-content: center !important;
  }
  /* pricing area */
  .pricing-area {
    background-image: none;
  }
  .pricing-area .pricing {
    font-size: 40px;
  }
  .pricing-area .card_title {
    font-size: 18px;
  }
  .pricing-area .features li {
    font-size: 16px;
  }
  .pricing-area .cta_btn {
    padding: 14px 0;
    font-size: 16px;
  }
  .pricing-area .card {
    border: 1px solid #4b4a50;
    margin-bottom: 30px;
  }
  .pricing-area .row .col-lg-4:last-child .card {
    margin-bottom: 0;
  }
  /* blog details */
  .single-blog-post .content .meta li i {
    top: 3px;
    font-size: 15px;
  }
  .single-blog-post .content h3 {
    font-size: 17px;
  }
  .single-blog-post .content .link-btn {
    position: relative;
    left: 0;
    bottom: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 10px;
  }
  .blog-details-desc .blog-content .entry-meta {
    margin-bottom: 10px;
  }
  .blog-details-desc .blog-content .entry-meta ul li {
    font-size: 14px;
    margin-right: 15px;
    margin-bottom: 5px;
  }
  .blog-details-desc .blog-content .entry-meta ul li::before {
    right: -10px;
    top: 4px;
  }
  .blog-details-desc .blog-content h3 {
    font-size: 17px;
    margin-bottom: 15px;
  }
  .blog-details-desc .blog-content .features-list {
    margin-top: 20px;
  }
  .blog-details-desc .blog-content .features-list li {
    font-size: 14px;
  }
  .blog-details-desc .article-footer {
    text-align: center;
    padding-top: 25px;
    margin-top: 25px;
  }
  .blog-details-desc .article-footer .article-tags {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .blog-details-desc .article-footer .article-share {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 15px;
  }
  .blog-details-desc .article-footer .article-share .social {
    text-align: center;
  }
  .blog-details-desc .article-author .author-profile {
    padding: 0 15px 15px;
  }
  .blog-details-desc .article-author .author-profile .author-profile-title h4 {
    font-size: 16px;
  }
  blockquote,
  .blockquote {
    padding: 20px !important;
  }
  blockquote p,
  .blockquote p {
    font-size: 15px !important;
  }
  blockquote::before,
  .blockquote::before {
    left: 25px;
    top: -10px;
    font-size: 60px;
  }
  .comments-area .comments-title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .comments-area .comment-body {
    padding-left: 0;
  }
  .comments-area .comment-author {
    font-size: 15px;
  }
  .comments-area .comment-author .avatar {
    height: 50px;
    left: 0;
    position: relative;
    width: 50px;
    display: block;
    margin-bottom: 12px;
  }
  .comments-area .comment-respond .comment-reply-title {
    font-size: 18px;
  }
  .comments-area .comment-respond .comment-form-author {
    width: 100%;
    padding-right: 0;
  }
  .comments-area .comment-respond .comment-form-email {
    width: 100%;
    padding-left: 0;
  }
  .comments-area .comment-respond .form-submit input {
    padding: 10px 25px;
    font-size: 14px;
  }
  .comments-area .comment-respond input[type="date"],
  .comments-area .comment-respond input[type="time"],
  .comments-area .comment-respond input[type="datetime-local"],
  .comments-area .comment-respond input[type="week"],
  .comments-area .comment-respond input[type="month"],
  .comments-area .comment-respond input[type="text"],
  .comments-area .comment-respond input[type="email"],
  .comments-area .comment-respond input[type="url"],
  .comments-area .comment-respond input[type="password"],
  .comments-area .comment-respond input[type="search"],
  .comments-area .comment-respond input[type="tel"],
  .comments-area .comment-respond input[type="number"],
  .comments-area .comment-respond textarea {
    font-size: 14px;
  }

  /* article area */
  .article-area .section-title {
    margin-bottom: 60px;
  }
  .article-area .item .pop-content ul li {
    font-size: 15px;
  }
  .article-area .item .pop-content h3 a {
    font-size: 25px;
  }

  /* footer area */
  .footer-area .single-footer-widget p {
    color: var(--paragraphColor);
    font-size: 16px;
  }
  .footer-area .single-footer-widget .social-links li a {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .footer-area .single-footer-widget h3 {
    font-size: 20px;
  }
  .footer-area .single-footer-widget .links-list li a {
    font-size: 16px;
  }
  .footer-area .single-footer-widget {
    text-align: center;
  }
  .footer-area .footer-bottom-area p {
    font-size: 15px;
  }
  .footer-area .footer-newsletter-info form .default-btn {
    padding-left: 20px !important;
  }
  .footer-area .footer-newsletter-info form .default-btn i {
    left: -130px;
  }
  .footer-top-area {
    padding-bottom: 0;
  }
  /* Top to Bottom Button css */
  #progress {
    bottom: 20px;
    right: 20px;
    height: 45px;
    width: 45px;
  }
  #progress-value {
    font-size: 25px;
  }
}
/* Min width 576px to Max width 767px */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .container-fluid {
    max-width: 540px;
  }
  .roadmap-area .container-fluid {
    max-width: unset;
  }
}
/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container-fluid {
    padding-left: calc(1.5rem * 0.5);
    padding-right: calc(1.5rem * 0.5);
  }
  .ptb-100 {
    padding: 80px 0px;
  }
  .pt-100 {
    padding-top: 80px;
  }
  .pb-100 {
    padding-bottom: 80px;
  }
  .section-title .width {
    margin: auto;
    text-align: center;
  }
  .section-title h2 {
    font-size: 37px;
  }
  .navbar .navbar-brand h2 {
    font-size: 25px;
  }
  /* nav area */
  .navbar .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* banner area */
  .banner-area {
    padding-top: 50px;
  }
  .banner-area .content {
    padding-top: 60px;
    padding-left: 0;
    padding-right: 12px;
    text-align: center;
  }
  .banner-area .popular-tag {
    justify-content: center;
  }
  .banner-area .popular-tag p {
    margin-bottom: 15px;
  }
  .banner-area .popular-tag a {
    padding: 7px 16px;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 10px;
  }
  .banner-area .content h1 {
    font-size: 52px;
    margin-bottom: 15px;
  }
  .banner-area .searchbox .form-control {
    padding: 20px 10px;
    font-size: 16px;
  }
  .banner-area .image {
    padding-top: 30px;
  }
  .banner-area .scroll-down {
    left: -87%;
  }
  /* fetuses area */
  .fetuses-area .single-fetuses-box .icon i {
    font-size: 50px;
    margin-bottom: 15px;
  }
  .fetuses-area .single-fetuses-box h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .fetuses-area .single-fetuses-box p {
    font-size: 16px;
  }
  .fetuses-area .single-fetuses-box a {
    font-size: 16px;
  }
  .fetuses-area .single-fetuses-box {
    padding: 0 20px;
    margin-bottom: 40px;
  }
  /* team area  */
  .team-area .owl-theme .owl-nav {
    top: 100%;
    left: 0;
    right: 0;
  }
  .team-area .owl-carousel .owl-nav button.owl-next,
  .team-area .owl-carousel .owl-nav button.owl-prev,
  .team-area .owl-carousel button.owl-dot {
    font-size: 50px !important;
  }
  /* about area */
  .about-area .image {
    margin-bottom: 30px;
  }
  .about-area .content {
    padding-left: 0px;
  }
  .about-area .sub-counter h3 {
    font-size: 36px;
  }
  .about-area .content h2 {
    font-size: 38px;
  }
  .about-area .content p {
    font-size: 16px;
  }
  /* gallery area */
  .gallery-area {
    padding-top: 120px;
  }
  .gallery-area .gallery-table ul {
    bottom: -55%;
    left: 0;
    justify-content: center;
  }
  .gallery-area .gallery {
    -moz-column-count: 2;
    column-count: 2;
    --webkit-column-count: 2;
    --moz-column-count: 2;
  }
  /* testimonial area */
  .testimonial-area .user img {
    height: 70px;
    width: 70px;
  }
  .testimonial-area .user:nth-child(5) {
    bottom: 80px;
    left: 9%;
  }
  /* pricing area */
  .pricing-area .pricing {
    font-size: 65px;
  }
  .pricing-area .card_title {
    font-size: 20px;
  }
  .pricing-area .features li {
    font-size: 16px;
  }
  .pricing-area .cta_btn {
    padding: 14px 0;
    font-size: 16px;
  }
  .pricing-area .card {
    margin-bottom: 30px;
  }
  .pricing-area .row .col-lg-4:last-child .card {
    margin-bottom: 0;
  }

  /* article area */
  .article-area .item .pop-content h3 {
    font-size: 25px;
  }
  .article-area .item .pop-content ul li {
    font-size: 15px;
  }
  /* footer area */
  .footer-area .single-footer-widget p {
    color: var(--paragraphColor);
    font-size: 16px;
  }
  .footer-area .single-footer-widget .social-links li a {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .footer-area .single-footer-widget h3 {
    font-size: 20px;
  }
  .footer-area .single-footer-widget .links-list li a {
    font-size: 16px;
  }
  /* Top to Bottom Button css */
  #progress {
    bottom: 20px;
    right: 20px;
    height: 45px;
    width: 45px;
  }
  #progress-value {
    font-size: 25px;
  }
}
/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .container-fluid {
    max-width: 960px;
    padding-left: calc(1.5rem * 0.5);
    padding-right: calc(1.5rem * 0.5);
  }
  .about-area.ptb-100 {
    padding-top: 120px;
    padding-bottom: 130px;
  }
}
/* Min width 1750px */
@media only screen and (min-width: 1750px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
  .container-fluid {
    max-width: 1920px;
    /* padding-left: 100px;
    padding-right: 100px; */
  }
  .about-area.ptb-100 {
    padding-top: 120px;
    padding-bottom: 130px;
  }
}

@media screen and (min-width: 992px) {
  /* coponent */
  .tag-container {
    display: flex;
    gap: 10px;
  }
  .tag {
    background: rgba(119, 41, 247, 0.2);
    padding: 4px;
  }
  .price-container {
    display: flex;
    margin: 40px 0 0 40px;
  }
  .discount-tag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    padding: 10px;

    background: rgba(119, 41, 247, 0.2);
    border: 2px solid #7729f7;
    border-radius: 8px;

    font-weight: 500;
    font-size: 18px;
    color: #7729f7;
  }
  .origin-price {
    font-weight: 500;
    font-size: 14px;

    color: rgb(255, 255, 255, 0.6);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #7729f7;
  }
  .discount-price {
    font-weight: 500;
    font-size: 18px;
    color: #fff;
  }

  .banner-area {
    padding: 0 20px;
  }
  .navbar .container-fluid {
    padding: 0 20px;
  }
  .navbar .navbar-brand {
    flex-shrink: 0;
  }
  .navbar .navbar-nav .nav-item {
    margin: 0 10px;
  }
  .navbar .navbar-nav .nav-item .nav-link {
    font-size: 14px;
  }
  .container-fluid {
    max-width: 1920px;
  }
  .navbar-nav {
    margin-right: 20px;
  }
  .nav-link {
    white-space: nowrap;
  }
  .default-btn.nav {
    position: relative;
    border-radius: 0;
    flex-shrink: 0;
    padding: 6px 28px;
    font-size: 20px;
    font-weight: bold;
    max-width: 194px;
  }
  .default-btn.nav::before {
    content: " ";
    position: absolute;
    top: 4px;
    right: -4px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(238, 223, 254, 0.6);
    background: rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
  .banner-area {
    padding-top: 280px;
    padding-bottom: 240px;
  }
  .banner-area .content p {
    margin-top: 40px;
    margin-bottom: 0;
  }

  .features-area {
    padding: 120px 100px 130px;
  }
  .features-area .carousel-control-prev,
  .features-area .carousel-control-next {
    width: auto;
  }
  .features-area .carousel-control-prev-icon {
    background-image: url("../img/control-pre-icon.svg");
  }
  .features-area .carousel-control-next-icon {
    background-image: url("../img/control-next-icon.svg");
  }
  .features-area .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 40px;
    height: 160px;
    color: #fff;
  }
  .features-area .carousel-control-prev {
    left: 0;
    transform: translateX(-100%);
  }
  .features-area .carousel-control-next {
    right: 0;
    transform: translateX(100%);
  }
  .featureCarousel {
    height: 630px;
  }
  .featureCarousel .left-image {
    width: 100%;
    height: 630px;
  }
  .carousel-item-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
  }
  .carousel-item__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgb(1, 0, 20, 0.4);
    width: 100%;
    padding: 0 40px 0 0;
    height: 630px;
  }
  .right-image-container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .features-area .right-image {
    width: 100%;
    height: 152px;
  }
  .featureCarousel h1 {
    font-size: 2rem;
    margin: 0 0 40px 40px;
  }
  .carousel-item-container__tag-container {
    margin: 20px 0 0 40px;
  }

  /* Show Area */
  .show-area {
    padding: 190px 100px;
  }
  .show-area__nav-group {
    display: inline-flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: rgb(255, 255, 255, 0.3);

    background: rgb(0, 0, 24, 0.2);
  }
  .show-area__nav-item {
    padding: 10px 40px;
    cursor: pointer;
  }
  .show-area__nav-item:hover {
    color: rgb(255, 255, 255, 0.5);
    transition: color 0.3s;
  }
  .show-area__nav-item + .show-area__nav-item {
    margin-left: 10px;
  }
  .show-area__nav-item.active {
    color: #fff;
  }

  .show-area-carousel {
    display: flex;
  }
}

/* Min width 1200px */
@media screen and (min-width: 1280px) {
  .container-fluid {
    max-width: 1920px;
  }
  .navbar .container-fluid {
    padding: 0 100px;
  }
  .navbar-nav {
    margin-right: 20px;
  }
  .nav-link {
    white-space: nowrap;
  }
  .navbar .navbar-nav .nav-item .nav-link {
    font-size: var(--font-size);
  }
  .default-btn.nav {
    border-radius: 0;
    flex-shrink: 0;
    padding: 8px 50px;
    font-size: 20px;
    font-weight: bold;
    max-width: 224px;
  }
}
